<template>
    <div class="user-management">
        <el-card class="page-header">
            <h2>用户管理</h2>
            <p>管理系统用户信息，包括添加、编辑、删除和查询用户</p>
        </el-card>

        <el-card class="content-card">
            <!-- 搜索和操作栏 -->
            <div class="operation-bar">
                <div class="search-area">
                    <el-input
                        v-model="searchKeyword"
                        placeholder="请输入用户名或账号搜索"
                        class="search-input"
                    >
                        <template #prefix>
                            <el-icon><Search /></el-icon>
                        </template>
                    </el-input>
                    <el-button type="primary" @click="handleSearch">
                        搜索
                    </el-button>
                </div>
                <div class="action-area">
                    <el-button type="primary" @click="handleAdd">
                        <el-icon><Plus /></el-icon>添加用户
                    </el-button>
                </div>
            </div>

            <!-- 用户列表 -->
            <el-table :data="userList" style="width: 100%" v-loading="loading">
                <el-table-column prop="username" label="用户名" />
                <el-table-column prop="accountId" label="账号" />
                <el-table-column prop="role" label="角色">
                    <template #default="scope">
                        <el-tag :type="getRoleTagType(scope.row.role)">
                            {{ getRoleName(scope.row.role) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.status"
                            @change="handleStatusChange(scope.row)"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.row)"
                            >编辑</el-button
                        >
                        <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.row)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-card>

        <!-- 添加/编辑用户对话框 -->
        <el-dialog
            v-model="dialogVisible"
            :title="dialogType === 'add' ? '添加用户' : '编辑用户'"
            width="500px"
        >
            <el-form
                ref="userFormRef"
                :model="userForm"
                :rules="userFormRules"
                label-width="100px"
            >
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="userForm.username" />
                </el-form-item>
                <el-form-item label="账号" prop="accountId">
                    <el-input v-model="userForm.accountId" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                        v-model="userForm.password"
                        type="password"
                        show-password
                    />
                </el-form-item>
                <el-form-item label="角色" prop="role">
                    <el-select v-model="userForm.role" placeholder="请选择角色">
                        <el-option label="普通用户" value="USER" />
                        <el-option label="心理医生" value="PSYCHOLOGIST" />
                        <el-option label="管理员" value="ADMIN" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Search, Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 表格数据
const loading = ref(false)
const searchKeyword = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const userList = ref([])

// 表单数据
const dialogVisible = ref(false)
const dialogType = ref('add')
const userFormRef = ref(null)
const userForm = reactive({
    username: '',
    accountId: '',
    password: '',
    role: ''
})

// 表单验证规则
const userFormRules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    accountId: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
    ],
    role: [{ required: true, message: '请选择角色', trigger: 'change' }]
}

// 获取角色名称
const getRoleName = (role) => {
    const roleMap = {
        USER: '普通用户',
        PSYCHOLOGIST: '心理医生',
        ADMIN: '管理员'
    }
    return roleMap[role] || role
}

// 获取角色标签类型
const getRoleTagType = (role) => {
    const typeMap = {
        USER: '',
        PSYCHOLOGIST: 'success',
        ADMIN: 'danger'
    }
    return typeMap[role] || ''
}

// 处理搜索
const handleSearch = () => {
    // TODO: 实现搜索逻辑
}

// 处理添加用户
const handleAdd = () => {
    dialogType.value = 'add'
    dialogVisible.value = true
    // 重置表单
    userForm.username = ''
    userForm.accountId = ''
    userForm.password = ''
    userForm.role = ''
}

// 处理编辑用户
const handleEdit = (row) => {
    dialogType.value = 'edit'
    dialogVisible.value = true
    // 填充表单数据
    Object.assign(userForm, row)
}

// 处理删除用户
const handleDelete = (row) => {
    ElMessageBox.confirm('确定要删除该用户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            // TODO: 实现删除逻辑
            ElMessage.success('删除成功')
        })
        .catch(() => {})
}

// 处理状态改变
const handleStatusChange = (row) => {
    // TODO: 实现状态更新逻辑
}

// 处理表单提交
const handleSubmit = () => {
    if (!userFormRef.value) return
    userFormRef.value.validate((valid) => {
        if (valid) {
            // TODO: 实现提交逻辑
            dialogVisible.value = false
            ElMessage.success(
                dialogType.value === 'add' ? '添加成功' : '编辑成功'
            )
        }
    })
}

// 处理分页
const handleSizeChange = (val) => {
    pageSize.value = val
    // TODO: 重新加载数据
}

const handleCurrentChange = (val) => {
    currentPage.value = val
    // TODO: 重新加载数据
}
</script>

<style scoped>
.user-management {
    padding: 20px;
}

.page-header {
    margin-bottom: 20px;
}

.page-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: normal;
    color: #333;
}

.page-header p {
    margin: 10px 0 0;
    color: #666;
    font-size: 14px;
}

.content-card {
    margin-bottom: 20px;
}

.operation-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.search-area {
    display: flex;
    gap: 10px;
}

.search-input {
    width: 300px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
</style>
